<template>
	<view class="data-picker-mark" @tap="handleClosePicker">
		<view class="data-picker-mark-cont" @tap.stop.prevent="">
			<view class="data-picker-mark-cont-tab">
				<view v-for="(item,index) in data.tab" :key="index" @tap="handleTab(item)"
					class="data-picker-mark-cont-tab-item"
					:class="{'data-picker-mark-cont-tab-item-active':item.level==data.activeLevel}">{{item.label}}
				</view>
			</view>
			<view class="data-picker-mark-cont-wrap">
				<view class="data-picker-mark-cont-wrap-item" v-for="(item,index) in compAcitveLevelList" :key="index"
					@tap="handleAdd(item)">
					{{item[props.label]}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		computed,
		watch
	} from 'vue'
	/**
	 * dataList 数据
	 * label 要显示的字段
	 * rangeKey id 唯一值
	 * promptText 显示的文字
	 */

	/**
	 * 最后一层,通过父级组件调用load(row,[]) 第二个参数为空，自动结束递归
	 */

	let props = defineProps(['dataList', 'label', 'rangeKey', 'promptText', 'show'])
	let emit = defineEmits(['load', 'nodeClick'])
	let data = reactive({
		wrapList: props.dataList,
		tab: [{
			level: 1,
			label: '请选择',
			value: '',
			data: []
		}],
		activeLevel: 1, //当前层级
	})
	watch(() => props.show, (v) => {
		if (!v) {
			data.activeLevel = 1
		}
	})
	const watchList = watch(() => props.dataList, (value) => {
		if (value && value.length > 0) {
			data.tab[0].data = value
			data.tab[0].data.forEach(item => item.level = 1)
			watchList()
		}
	}, {
		deep: true
	})
	/**
	 * 点击关闭选择框
	 */
	function handleClosePicker() {
		emit('close')
	}
	/**
	 * 返回当前层级下的数据
	 */
	let compAcitveLevelList = computed(() => {
		if (data.activeLevel == 1) {
			//第一层返回传递过来的数组
			return props.dataList
		} else {
			let item = data.tab.find(item => item.level == data.activeLevel)
			if (item && item.data) {
				return item.data
			} else {
				return []
			}
		}

	})
	onMounted(() => {
		data.wrapList = props.dataList
	})
	/**
	 * 获取懒加载的数据
	 */
	function load(parentObj, rows) {
		let nextLevel = parentObj.level + 1
		rows.forEach(item => {
			item.level = nextLevel
			item.parentId = parentObj[props.rangeKey]
		})
		parentObj.level = parentObj.level ? parentObj.level : 1
		let index = parentObj.level - 1
		
		data.tab[index].label = parentObj.region_name
		data.tab[index].value = parentObj.region_id
		
		if (rows.length <= 0) {
			nodeClick()
			return false
		}
		let is = data.tab.find(item => item.label == '请选择')
		if (!is) {
			data.tab.push({
				level: nextLevel,
				label: '请选择',
				data: rows
			})
		} else {
			let item = data.tab.find(item => item.level == nextLevel)
			item.data = []
			item.data = rows
		}
		data.activeLevel = nextLevel
	}
	/**
	 * 点击最后一层，关闭组件返回内容
	 */
	function nodeClick() {
		let e = {}
		e.value = data.tab.map(item => item.value)
		e.label = data.tab.map(item => item.label)
		data.activeName = e.label.join('-')
		emit('nodeClick', e)
		handleClosePicker()
	}
	/**
	 * 点击项，获取子项
	 * @param {Object} item
	 */
	function handleAdd(item) {
		//将子级的选项删除
		data.tab = data.tab.filter(items => items.level <= item.level)
		emit('load', item)
	}
	/**
	 * 切换层级
	 */
	function handleTab(item) {
		data.activeLevel = item.level
	}


	defineExpose({
		load
	})
</script>

<style scoped lang="less">
	.data-picker {
		width: 100%;
		height: 100%;

		&-cont {
			width: 100%;
			height: 100%;
			display: none;
			justify-content: space-between;
			align-items: center;

			.pl {
				color: #858585;
				font-size: 28upx;
			}
		}


		&-mark {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			background-color: rgba(0, 0, 0, .3);
			z-index: 9;

			&-cont {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: auto;
				max-height: 70vh;
				padding: 0 30upx;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 20upx 20upx 0 0;
				z-index: 10;

				&-header {
					height: 100upx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					&-title {
						font-size: 30upx;
						color: #222;
					}
				}

				&-tab {
					width: 100%;
					// height: 70upx;
					border-bottom: 1upx solid #ebebeb;
					overflow-x: auto;
					white-space: nowrap;

					&-item {
						width: 100px;
						display: inline-block;
						height: 100%;
						line-height: 70upx;
						font-size: 30upx;
						color: #222;
						text-align: center;
						margin-right: 20upx;

						&-active {
							position: relative;
						}

						&-active:after {
							position: absolute;
							content: '';
							bottom: 0;
							left: 0;
							width: 100%;
							height: 4upx;
							background-color: #3653ff;
						}
					}
				}

				&-wrap {
					height: 60vh;
					overflow: auto;

					&-item {
						font-size: 28upx;
						color: #222;
						height: 70upx;
						line-height: 70upx;
					}
				}
			}
		}

	}

	.slot:empty+.data-picker-cont {
		//插槽为空，显示默认内容
		display: flex !important;
	}
</style>